<template>
    <footer class="vm-footer-container">
        <router-link tag="span" to="/index">
            <img src="../../static/images/v_logo.png" alt="">
            <p>首页</p>
        </router-link>
        <router-link tag="span" to="/Cockpit/index">
            <div class="icon-warp">
                <i class="vm-icon work_bench"></i>
            </div>
            <p>智慧供应链云</p>
        </router-link>
        <router-link tag="span" to="/ManufacturingCloud">
            <div class="icon-warp">
                <i class="vm-icon statistics"></i>
            </div>
            <p>智能制造云</p>
        </router-link>
        <!--<router-link tag="span" to="/expert_evaluation">-->
            <!--<div class="icon-warp">-->
                <!--<i class="vm-icon expert-evaluation"></i>-->
            <!--</div>-->
            <!--<p>专家评标</p>-->
        <!--</router-link>-->
        <router-link tag="span" to="/menber_center">
            <div class="icon-warp">
                <i class="vm-icon menber"></i>
            </div>
            <p>会员中心</p>
        </router-link>
    </footer>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.vm-footer-container {
    z-index: 999;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 90px;
    background-color: #fff;
    border-top: 1px solid #eeeeee;
    display: flex;
    span {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .icon-warp {
            width: 47px;
            height: 38px;
        }
        p {
          margin-top: 5px;
          font-size: 26px;
        }
        i {
            width: 36px;
            height: 36px;
            display: inline-block;
        }
        // i.vm-icon.index {
      //     width: 47px;
      //     height: 37px;
      //    background-position: -144px -400px;
      // }
        img {
          width: 59px;
          height: 46px;
        }
        i.vm-icon.work_bench {
            width: 38px;
            height: 27px;
            background-position: -47px -163px;
        }
        i.vm-icon.statistics {
            width: 37px;
            height: 37px;
            background-position: -47px -319px;
        }
        i.vm-icon.expert-evaluation {
            width: 32px;
            height: 37px;
            background-position: -50px -240px;
        }
        i.vm-icon.menber {
            width: 38px;
            height: 38px;
            background-position: -47px -79px;
        }
    }
    span.router-link-active {
        i.vm-icon.index {
            background-position: -144px -400px;
        }
        i.vm-icon.work_bench {
            background-position: -47px -205px;
        }
        i.vm-icon.statistics {
            background-position: -47px -359px;
        }
        i.vm-icon.expert-evaluation {
            background-position: -50px -280px;
        }
        i.vm-icon.menber {
            background-position: -47px -39px;
        }
    }
}
</style>

